<template>
    <!-- 漏斗图 -->
    <div class="app-container">
        <el-row :gutter="30" :style="{height: '400px', width: '600px'}">
            <div class="chart" ref="chart" :style="{height:'100%',width:'100%'}"></div>
        </el-row>
    </div>
</template>

<script>
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import "echarts-wordcloud/dist/echarts-wordcloud";
import "echarts-wordcloud/dist/echarts-wordcloud.min";
import resize from '@/views/dashboard/mixins/resize'

export default {
    name: 'ChartWordCloud',
    mixins: [resize],
    data() {
        return {
            chart: null
        }
    },
    mounted() {
        this.$nextTick(() => {
            this.initChart()
        })
    },
    beforeDestroy() {
        if (!this.chart) {
            return
        }
        this.chart.dispose()
        this.chart = null
    },
    methods: {
        initChart() {
            this.chart = echarts.init(this.$refs['chart'], 'macarons')
            this.setOptions(this.chartData)
        },
        setOptions() {
            this.chart.setOption({
                title: {
                    text: '词云',
                    link: 'http://www.baidu.com'
                },
                tooltip: {
                    show: true
                },
                series: [
                    {
                        name: 'google trends',
                        type: 'wordCloud',
                        size: ['80%', '80%'], //字符云大小，支持绝对值（px）和百分比
                        textRotation: [0, 45, 90, -45], //文字旋转角度可选列表，默认会随机从水平（0）和垂直（90）两个方向选择，可以设置多个可选角度，例如[0, -45, 45, 90]
                        textPadding: 0, //字体之间的间隔
                        //字体大小自动计算配置，默认开启自动计算，程序会根据每个数据的value大小以及画布的大小控制字体大小已达到最佳的显示效果。
                        //minSize   可以强制最小字体。关闭的时候字体大小取 itemStyle.normal.textStyle.fontSize.建议开启
                        autoSize: {
                            enable: true,
                            minSize: 14
                        },
                        data: [
                            {
                                value: 10000,
                                name: 'Sam S Club',
                                itemStyle: {
                                    normal: {
                                        color: 'black'
                                    }
                                }
                            },
                            {
                                value: 6181,
                                name: 'Macys',
                                itemStyle: this.createRandomItemStyle()
                            },
                            {
                                value: 4386,
                                name: 'Amy Schumer',
                                itemStyle: this.createRandomItemStyle()
                            },
                            {
                                value: 4055,
                                name: 'Jurassic World',
                                itemStyle: this.createRandomItemStyle()
                            },
                            {
                                value: 2467,
                                name: 'Charter Communications',
                                itemStyle: this.createRandomItemStyle()
                            },
                            {
                                value: 2244,
                                name: 'Chick Fil A',
                                itemStyle: this.createRandomItemStyle()
                            },
                            {
                                value: 1898,
                                name: 'Planet Fitness',
                                itemStyle: this.createRandomItemStyle()
                            },
                            {
                                value: 1484,
                                name: 'Pitch Perfect',
                                itemStyle: this.createRandomItemStyle()
                            },
                            {
                                value: 1112,
                                name: 'Express',
                                itemStyle: this.createRandomItemStyle()
                            },
                            {
                                value: 965,
                                name: 'Home',
                                itemStyle: this.createRandomItemStyle()
                            },
                            {
                                value:  847,
                                name: 'Johnny Depp',
                                itemStyle: this.createRandomItemStyle()
                            },
                            {
                                value:  582,
                                name: 'Lewis Hamilton',
                                itemStyle: this.createRandomItemStyle()
                            },
                            {
                                value:  555,
                                name: 'Lena Dunham',
                                itemStyle: this.createRandomItemStyle()
                            },
                            {
                                value:  550,
                                name: 'KXAN',
                                itemStyle: this.createRandomItemStyle()
                            },
                            {
                                value:  462,
                                name: 'May Ellen Mark',
                                itemStyle: this.createRandomItemStyle()
                            },
                        ]
                    }
                ]
            });
        },
        createRandomItemStyle() {
            return {
                normal: {
                    color: 'rgb(' + [
                        Math.round(Math.random() * 160),
                        Math.round(Math.random() * 160),
                        Math.round(Math.random() * 160)
                    ].join(',') + ')'
                }
            }
        }
    }
}
</script>